<template>
  <a-card :style="{ marginBottom: '10px' }">
    <a-row :gutter="12">
      <a-col>订单编号:</a-col>
      <a-col><a-input v-model:value="selId"></a-input></a-col>
      <a-col>选择日期:</a-col>
      <a-col><a-range-picker v-model:value="selDate" /></a-col>
      <a-col><a-button @click="sel">查询</a-button></a-col>
    </a-row>
  </a-card>
  <!-- 表格区域 -->
  <a-card>
    <a-table :columns="columns" :dataSource="selData">
      <template #price="{ record }">
        {{ record.price.toFixed(2) }}
      </template>
      <template #payStatus="{ record }">
        {{ record.payStatus ? "支付成功" : "支付失败" }}
      </template>
      <template #action="{ record }">
        <a
          @click="
            visible = true;
            modData = { ...record };
          "
          >查看详情</a
        >
      </template>
    </a-table>
  </a-card>
  <!-- 展示数据区域 -->
  <a-modal v-model:visible="visible" title="订单详细" footer="" width="630px">
    <div id="modTitle">
      <img
        data-v-1988bcc0=""
        src=""
        class="icon"
      />
      <span data-v-1988bcc0="" class="status">出货成功</span>
      <img
        data-v-1988bcc0=""
        src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png"
        class="pic"
      />
    </div>
    <a-descriptions :column="2">
      <a-descriptions-item label="订单编号">{{
        modData.orderNo
      }}</a-descriptions-item>
      <a-descriptions-item label="商品名称">{{
        modData.skuName
      }}</a-descriptions-item>
      <a-descriptions-item label="订单金额">{{
        modData.price.toFixed(2)
      }}</a-descriptions-item>
      <a-descriptions-item label="设备编号">{{
        modData.innerCode
      }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{
        modData.createTime
      }}</a-descriptions-item>
      <a-descriptions-item label="完成时间">{{
        modData.updateTime
      }}</a-descriptions-item>
      <a-descriptions-item label="支付方式">{{
        modData.status == 2 ? "微信支付" : "支付宝支付"
      }}</a-descriptions-item>
      <a-descriptions-item label="设备地址">{{
        modData.addr.split("-").slice(-1)[0]
      }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script>
import { reactive, toRefs, ref, onMounted, watch } from "vue";
export default {
  setup() {
    let content = reactive({
      columns: [
        {
          title: "序号",
          key: "index",
          customRender: (text, record, index) => {
            return text.index + 1;
          },
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
        },
        {
          title: "商品名称",
          dataIndex: "skuName",
          key: "skuName",
        },
        {
          title: "订单金额(元)",
          key: "price",
          slots: {
            customRender: "price",
          },
        },
        {
          title: "设备编号",
          dataIndex: "innerCode",
          key: "innerCode",
        },
        {
          title: "订单状态",
          key: "payStatus",
          slots: {
            customRender: "payStatus",
          },
        },
        {
          title: "订单日期",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "action",
          slots: {
            customRender: "action",
          },
        },
      ],
      tableData: [
        {
          id: "1612539724567269378",
          orderNo: "010000025586180345698535",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1306121095795654658",
          skuName: "统一阿萨姆奶茶",
          classId: 1,
          status: 2,
          amount: 4,
          bill: 1,
          price: 4,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
        {
          id: "1612539725213192194",
          orderNo: "010000025586180499567782",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1306121095795654658",
          skuName: "统一阿萨姆奶茶",
          classId: 1,
          status: 2,
          amount: 4,
          bill: 1,
          price: 4,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
        {
          id: "1612539725905252353",
          orderNo: "010000025586180663741304",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1348837949810151426",
          skuName: "苹果手机",
          classId: 7,
          status: 2,
          amount: 100,
          bill: 15,
          price: 100,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
        {
          id: "1612539726576340993",
          orderNo: "010000025586180823532386",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1349615206547853313",
          skuName: "泡面1",
          classId: 1,
          status: 2,
          amount: 4.5,
          bill: 1,
          price: 4.5,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
        {
          id: "1612539727247429634",
          orderNo: "010000025586180983245346",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1349615206547853313",
          skuName: "泡面1",
          classId: 1,
          status: 2,
          amount: 4.5,
          bill: 1,
          price: 4.5,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
        {
          id: "1612539727662665730",
          orderNo: "010000025586181083930394",
          thirdNo: null,
          innerCode: "01000002",
          addr: "北京市-市辖区-西城区-凯德MALL一层西门入口右侧",
          areaId: 0,
          skuId: "1349615206547853313",
          skuName: "泡面1",
          classId: 1,
          status: 2,
          amount: 4.5,
          bill: 1,
          price: 4.5,
          payType: "2",
          payStatus: 1,
          regionId: "1357163536186347522",
          regionName: "北京平西府街道",
          businessId: 1,
          businessName: "学校",
          ownerId: 1,
          openId: "wqdqdqdqdqd",
          cancelDesc: "",
          createTime: "2023-01-09T20:00:05",
          updateTime: "2023-01-09T20:00:05",
        },
      ],
      selData: [],
      modData: {},
    });
    let selId = ref("");
    let selDate = ref([]);
    let sel = () => {
      content.selData = content.tableData.filter((item) => {
        if (selDate._value.length) {
          let startdate = selDate._value[0]._d;
          let enddate = selDate._value[1]._d;
          let date = new Date(item.createTime);
          return (
            item.orderNo.includes(selId._value) &
            (startdate <= date) &
            (date <= enddate)
          );
          // if (
          //   startdate.getFullYear() <=
          //   date.getFullYear() <=
          //   enddate.getFullYear()
          // ) {
          //   if (
          //     startdate.getMonth() + 1 <=
          //     date.getMonth() + 1 <=
          //     enddate.getMonth() + 1
          //   ) {
          //     if (startdate.getDate() <= date.getDate() <= enddate.getDate()) {
          //       return item.orderNo.includes(selId._value);
          //     }
          //   }
          // }
          // return (
          //   item.orderNo.includes(selId._value) &
          //   (startdate.getFullYear() <=
          //     date.getFullYear() <=
          //     enddate.getFullYear() &&
          //     startdate.getMonth() + 1 <=
          //       date.getMonth() + 1 <=
          //       enddate.getMonth() + 1 &&
          //     startdate.getDate() <= date.getDate() <= enddate.getDate())
          // );
        }
        return item.orderNo.includes(selId._value);
      });
    };
    onMounted(() => {
      content.selData = content.tableData;
    });
    // watch(selDate, (a, b) => {
    //   console.log(a[0]._d.getFullYear());
    //   console.log(a[0]._d.getMonth()+1);
    //   console.log(a[0]._d.getDate());
    // });
    let visible = ref(false);
    return {
      ...toRefs(content),
      sel,
      selId,
      visible,
      selDate,
    };
  },
};
</script>
<style lang='scss' scoped>
#modTitle {
  display: flex;
  align-items: center;
  height: 54px;
  margin-bottom: 30px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  :first-child {
    margin-left: 22px;
  }
  span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
  :last-child {
    margin-right: 76px;
    margin-bottom: 7px;
  }
}
</style>